import Home from '../pages/Home'

import NotFound from '../pages/NotFound'
import Detail from '../pages/Detail'
import User from '../pages/User'
import {Navigate} from 'react-router-dom'
import React from 'react'
import Recommend from "../pages/Recommend";
import Ranking from "../pages/Ranking";
import Popular from "../pages/Popular";
import About from "../pages/About";
import Login from "../pages/Login";


const routes = [
    {
        path: "/",
        element: <Navigate to="/home"/>
    },
    {
        path: "/home",
        element: <Home/>,
        children: [
            {
                path: "/home",
                element: <Navigate to="/home/recommend"/>
            },
            {
                path: "/home/recommend",
                element: <Recommend/>
            },
            {
                path: "/home/ranking",
                element: <Ranking/>
            },
            {
                path: "/home/popular",
                element: <Popular/>,
                children: [
                    {
                        path: "/home/popular/detail/:id",
                        element: <Detail/>
                    }
                ]
            }
        ]
    },
    {
        path: "/about",
        element: <About/>
    },
    {
        path: "/login",
        element: <Login/>
    },
    {
        path: "/user",
        element: <User/>
    },
    {
        path: "*",
        element: <NotFound/>
    }
]


export default routes
